<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    id：<input type="text" id="id"/><br>
    姓：<input type="text" id="first"/><br>
    名：<input type="text" id="last"/><br>
    邮箱：<input type="text" id="email"/><br>
    密码：<input type="password" id="pwd"/><br>
    <input type="button" onclick="add()" value="添加"/>
</form>
<table id="users"></table>
</body>
<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function () {
      init();
    })

    function init(){
        $.ajax({
            type:"GET",
            url:"/user/list",
            data:{
            },
            dateType:"json",
            success:function (res) {
                $("#users").empty();
                console.log(res)
                var i;
                for (i = 0; i < res.length; i++) {
                    var item = res[i];
                    var tr = $("<tr>");
                    var t1 = $("<td>");
                    t1.append(item.id)
                    var t2 = $("<td>");
                    t2.append(item.firstName);
                    var t3 = $("<td>");
                    t3.append(item.lastName);
                    var t4 = $("<td>");
                    t4.append(item.email);
                    tr.append(t1);
                    tr.append(t2);
                    tr.append(t3);
                    tr.append(t4);
                    $("#users").append(tr);
                }
            }})
    }
    function add(){
        var id = $("#id").val();
        var first = $("#first").val();
        var last = $("#last").val();
        var email = $("#email").val();
        var pwd = $("#pwd").val();
        $.ajax({
            type: "GET",
            url: "/user/add",
            data: {
                "id":id,
                "first":first,
                "last":last,
                "email":email,
                "pwd":pwd
            },
            dataType: "json",
            success: function (res) {
               init();
            }
        });
    }

</script>
</html>

